<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <link rel="stylesheet" href="snake-game.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>

<body>
    <div class="game-container">
        <div class="game-header">
            <div class="score-container">
                <span>分数: <span id="score">0</span></span>
                <span>最高分: <span id="high-score">0</span></span>
                <span>长度: <span id="length">1</span></span>
            </div>
            <div class="controls">
                <button id="start-game" class="btn">
                    <i class="fas fa-play"></i> 开始游戏
                </button>
                <button id="pause-game" class="btn" disabled>
                    <i class="fas fa-pause"></i> 暂停
                </button>
            </div>
        </div>

        <div class="game-area">
            <div class="game-board" id="game-board"></div>
            <div class="side-panel">
                <div class="speed-info">
                    <h3>当前速度</h3>
                    <div id="current-speed">1</div>
                </div>
                <div class="controls-info">
                    <h3>操作说明</h3>
                    <p>第一局熟悉操作</p>
                    <p>↑ : 向上移动</p>
                    <p>↓ : 向下移动</p>
                    <p>← : 向左移动</p>
                    <p>→ : 向右移动</p>
                    <p>P : 暂停游戏</p>
                </div>
            </div>
        </div>

        <div class="game-over" id="game-over">
            <h2>游戏结束!</h2>
            <p>你的得分: <span id="final-score">0</span></p>
            <button id="restart-game" class="btn">
                <i class="fas fa-redo"></i> 再玩一次
            </button>
        </div>

        <div class="mobile-controls">
            <div class="direction-btn up" id="up">
                <i class="fas fa-arrow-up"></i>
            </div>
            <div class="direction-btn down" id="down">
                <i class="fas fa-arrow-down"></i>
            </div>
            <div class="direction-btn left" id="left">
                <i class="fas fa-arrow-left"></i>
            </div>
            <div class="direction-btn right" id="right">
                <i class="fas fa-arrow-right"></i>
            </div>
        </div>
    </div>
    <script src="snake-game.js"></script>
</body>

</html>